const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    host: '0.0.0.0',
    open: true,
    port: 4000, // 端口
    https: false, // 启用https
  },
  publicPath: './',
  outputDir: 'dist',
  assetsDir: '', // 打包的静态文件目录
  filenameHashing: true, // 使用hash命名
  productionSourceMap: false, // 不需要生产环境的 source map
  configureWebpack: (config) => { // 打包忽略文件
    const plugins = []

    if (isProduction) {
      /* 去除注释 */
      plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false, // 去掉注释
          },
          warnings: false,
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log']// 移除console
          }
        }
      }))
      /* gzip压缩 */
      plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/, // 匹配文件名
        threshold: 10000, // 对超过10k的数据压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8 // 压缩比
      }))
      /* 取消webpack警告的性能提示 */
      config.performance = {
        hints: 'warning',
        // 入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        // 生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        // 只给出 js 文件的性能提示
        assetFilter: function(assetFilename) {
          return assetFilename.endsWith('.js')
        }
      }
    }
    /* cdn不打包 */
    config.externals = { // 不打包文件，'别名' : '原名'
      'Vue': 'Vue',
      'VueRouter': 'VueRouter',
      'Vuex': 'Vuex',
      'axios': 'axios',
      'moment': 'moment',
      'Md5': 'Md5',
      'element-ui': 'ELEMENT',
    }
    return { plugins }
  },
  chainWebpack: (config) => {
    /* 别名配置，set第一个参数：设置的别名，第二个参数：设置的路径 */
    config.resolve.alias
      .set('@', resolve('src'))

    if (isProduction) {
      /* webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete */
      config.optimization.delete('splitChunks')

      /* 压缩图片 */
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({ bypassOnDebug: true })
    }
  },
  css: {
    loaderOptions: {
      sass: { // 全局sass注入
        prependData: `
          @import '@/styles/common.scss';
        `
      }
    }
  },
  pages: {
    index: {
      entry: `src/main.js`,
      template: 'public/index.html',
      filename: 'index.html',
      favicon: ``,
      title: '儿童社区',
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      cdn: {
        css: [
          'https://at.alicdn.com/t/font_3228810_qe8ow30e4d9.css',
          'https://unpkg.com/element-ui/lib/theme-chalk/index.css', // element样式库
        ],
        js: [ // 优先同步加载的js
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js',
          'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js',
          'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
          'https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js', // moment时间转化
          'https://unpkg.com/element-ui/lib/index.js',
        ],
        deferJs: [ // 延迟执行的js
          'https://aha-school-management-1301319986.cos.ap-shanghai.myqcloud.com/system/moment-zhcn.js', // moment中文化
        ]
      }
    }
  },
}
